<template>
  <div class="container">
    <div class="head">
      <h2 class="company-name">木易地面装饰</h2>
      <h1 class="title">木易地面装饰工程</h1>
      <h4 class="subtitle">一样的服务 不一样的关怀</h4>

      <div class="advantage">
        <div class="advantage-item">坚硬品质</div>
        <div class="advantage-item">恒久耐用</div>
        <div class="advantage-item">种类繁多</div>
        <div class="advantage-item">质保一年</div>
      </div>
      <div class="img-box">
        <img src="./assets/img/p2.jpg" alt="" />
        <div class="phone-info">
          <p class="phone-text">高平之地坪工程建设一站式服务商</p>
          <p class="phone-text">
            <img src="./assets/img/phone.png" alt="" />
            高品质地坪服务：186-6109-6603
          </p>
        </div>
      </div>
    </div>

    <!-- 工程案列 -->
    <h3 class="show-title">
      <img src="./assets/title.png" alt="" />
    </h3>
    <div class="video-box">
      <video class="video" controls="control" autoplay="autoplay">
        <source src="./assets/demo.mp4" type="video/mp4" />
      </video>
    </div>

    <!-- 图片展示 -->
    <h4 class="demo-title">案列一</h4>
    <div class="img-box1">
      <div class="left-box">
        <img src="./assets/img/l1.jpg" alt="" />
      </div>
      <div class="right-box">
        <img src="./assets/img/r1.jpg" alt="" />
        <img src="./assets/img/r2.jpg" alt="" />
      </div>
    </div>
    <div class="img-box2">
      <div class="left-box box">
        <img src="./assets/img/l2.jpg" alt="" />
      </div>
      <div class="middle-box box">
        <img src="./assets/img/m1.jpg" alt="" />
        <img src="./assets/img/m2.jpg" alt="" />
      </div>
      <div class="right-box box">
        <img src="./assets/img/r3.jpg" alt="" />
      </div>
    </div>

    <h4 class="demo-title">案列二</h4>
    <!-- <img style="width: 100%" src="./assets/img/p1.png" alt=""> -->
    <div class="img-box1">
      <div class="left-box">
        <img src="./assets/img/l3.jpg" alt="" />
      </div>
      <div class="right-box">
        <img src="./assets/img/a1.jpg" alt="" />
        <img src="./assets/img/a2.jpg" alt="" />
      </div>
    </div>
    <div class="img-box2">
      <div class="middle-box box">
        <img src="./assets/img/a3.jpg" alt="" />
        <img src="./assets/img/a4.jpg" alt="" />
      </div>
      <div class="middle-box box">
        <img src="./assets/img/a5.jpg" alt="" />
        <img src="./assets/img/a6.jpg" alt="" />
      </div>
      <div class="middle-box box">
        <img src="./assets/img/a7.jpg" alt="" />
        <img src="./assets/img/m2.jpg" alt="" />
      </div>
    </div>

    <div id="formBox">
      <SubForm />
    </div>


    <div class="fixed-footer">
      <a class="phone-box" href="tel:18661096603">
        <img src="./assets/phoneAsk.png" alt="">
        <span>热线咨询</span>
      </a>
      <a class="go-form" href="#formBox">
        <img src="./assets/form.png" alt="">
        <span>立即前往咨询</span>
      </a>
    </div>
  </div>
</template>

<script>
import SubForm from './views/SubForm.vue'
export default {
  name: "App",
  components: {
    SubForm
  }
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
</style>
<style lang="scss" scoped>
.container {
  width: 100%;
  overflow: hidden;
  font-family: PingFangSC-Regular, sans-serif;
  position: relative;
  padding-bottom: 50px;
  .head {
    text-align: center;
    padding-top: 20px;
    color: #fff;
    background: rgb(39, 224, 70);
    width: 100%;
    .company-name {
      font-size: 18px;
      margin-bottom: 20px;
    }
    .title {
      margin: 0 24px;
      padding: 10px 0 30px;
      font-size: 28px;
      letter-spacing: 0.2rem;
      border: 2px solid #fff;
      border-radius: 4px;
      position: relative;
    }
    .subtitle {
      font-size: .9rem;
      letter-spacing: 1px;
      font-weight: 500;
      margin: 0 70px;
      text-align: center;
      transform: translateY(-12px);
      z-index: 999;
      background: rgb(39, 224, 70);
    }

    .advantage {
      display: flex;
      justify-content: space-between;
      margin: 0 18px;
      padding: 10px;
      line-height: 16px;
      border-radius: 4px;
      background-color: #fff;
      color: #000;
      margin-bottom: 10px;
    }

    .img-box {
      width: 100%;
      position: relative;
      img {
        width: 100%;
      }
      .phone-info {
        margin: 0 18px;
        padding: 2px 0;
        background-color: #fff;
        color: #000;
        border-radius: 46px;
        transform: translateY(-40px);
        .phone-text {
          margin: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          &:nth-child(2) {
            font-size: 14px;
          }
          img {
            width: 14px;
            margin-right: 4px;
          }
        }
      }
    }
  }

  .show-title {
    margin: 30px 0 0;
    text-align: center;
    width: 100%;
    img {
      width: 100%;
    }
  }

  .video-box {
    .video {
      height: 280px;
      width: 100%;
    }
  }
  .demo-title {
    text-align: center;
  }
  .img-box1 {
    width: 100%;
    display: flex;
    .left-box {
      padding: 4px;
      width: 50%;
      img {
        width: 100%;
        height: 240px;
      }
    }
    .right-box {
      padding: 4px;
      width: 50%;
      img {
        width: 100%;
        height: 119px;
      }
    }
  }

  .img-box2 {
    width: 100%;
    display: flex;
    .box {
      padding: 4px;
      width: 33.1%;
      &.left-box {
        padding: 4px;
        img {
          width: 100%;
          height: 200px;
        }
      }

      &.middle-box {
        padding: 4px;
        img {
          width: 100%;
          height: 99px;
        }
      }

      &.right-box {
        padding: 4px;
        img {
          width: 100%;
          height: 200px;
        }
      }
    }
  }

  .formBox {
    width: 100%;
    background-color: #fff;

  }

  .fixed-footer {
    height: 50px;
    width: 100%;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: -1px;
    display: flex;
    .phone-box {
      width: 110px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-top: 1px solid #e8eaec;
      font-size: 14px;
      color: #515a6e;
      text-decoration: none;
      img {
        width: 22px;
      }
    }
    .go-form {
      flex: 1;
      background-color: rgb(39, 224, 70);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      img {
        margin-right: 6px;
      }
    }
  }

}
</style>